import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
import tabsss, { TabsState } from '../store/modules/tabs'
import menuuu, { MenuState } from '../store/modules/menu'
import userrr, { UserState } from './modules/user'
import { CommonStore } from './help'

// console.log(tabsss)
 
export type RootState = {
  tabs: TabsState,
  menu: MenuState,
  user: UserState
}

// 导入所有的模块
export const modules = {
  tabs: tabsss,
  menu: menuuu,
  user: userrr
}


export const key: InjectionKey<Store<RootState>> = Symbol()

export const store = createStore<RootState>({
  modules
  // state: {
  //   count: 0,
  //   collapse: false,
  //   tabsList: []
  // },
  // mutations: {
  //   // 这个State是上面自定义的接口（第5行）
  //   // 这个count111是HelloWorld组件传进来的值
  //   setCount(state: State, count111: number) {
  //     state.count = count111
  //   },
  //   // 设置collapse
  //   setCollapse: (state: State, collapse: boolean) => {
  //     state.collapse = collapse
  //   },
  //   addTabe: (state: State, tab: ITabe) => {
  //     // 判断是否已经存在,如果不存在,才放入
  //     if(state.tabsList.some(item => item.path === tab.path)) return
  //     state.tabsList.push(tab)
  //   }
  // },
  // getters: {
  //   getCount(state: State) {
  //     return state.count
  //   },
  //   // 获取collapse
  //   getCollapse: (state: State) => {
  //     return state.collapse
  //   },
  //   // 获取tabs
  //   getTabs: (state: State) => {
  //     return state.tabsList
  //   }
  // }
}) as CommonStore

// 定义自己的 `useStore` 组合式函数
export function useStore (): CommonStore {
  return baseUseStore(key)
}